<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			a{text-decoration: none;}
			ul li{list-style: none;}
			.bigbox{
				width: 400px;
				height: 350px;
				border: 1px solid red;
				margin: 50px auto;
				position: relative;
			}
			.bigbox .box{
				width: 400px;
				height: 350px;
				overflow: hidden;/* 这个设置可以隐藏多余的元素 */
			}
			.bigbox .box img{
				width: 400px;
				height: 350px;
				
			}
			.box div{
				float: left;
				
			}
			.btn{
				position: absolute;
				bottom:10px;
				left: 175px;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div class="btn">
			<a href="#img1">1</a>
			<a href="#img2">2</a>
			<a href="#img3">3</a>
			<a href="#img4">4</a>
			<a href="#img5">5</a>
			</div>
			<div class="box">
				<div id="img1" style="display: block;"><img src="img/1.jpg"></div>
				<div id="img2"><img src="img/2.jpg"></div>
				<div id="img3"><img src="img/3.jpg"></div>
				<div id="img4"><img src="img/4.jpg"></div>
				<div id="img5"><img src="img/5.jpg"></div>
			</div>
		</div>
	</body>
</html>
